<!DOCTYPE html>
<html lang="en">
  <head>
    <title>three.js webgl - equirectangular panorama</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <link type="text/css" rel="stylesheet" href="main.css" />
    <script src="./js/orienter.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <div id="info"><div></div><div></div></div>

    <script type="module">
      import * as THREE from "./js/three.module.js";

      var camera, scene, renderer;

      var isUserInteracting = false,
        onMouseDownMouseX = 0,
        onMouseDownMouseY = 0,
        lon = 0,
        onMouseDownLon = 0,
        lat = 0,
        onMouseDownLat = 0,
        phi = 0,
        theta = 0;

      init();
      animate();

      function init() {
        var container, mesh;

        container = document.getElementById("container");

        camera = new THREE.PerspectiveCamera(
          75,
          window.innerWidth / window.innerHeight,
          1,
          1100
        );
        camera.target = new THREE.Vector3(0, 0, 0);

        scene = new THREE.Scene();

        var geometry = new THREE.SphereBufferGeometry(500, 60, 40);
        // invert the geometry on the x-axis so that all of the faces point inward
        geometry.scale(-1, 1, 1);

        var texture = new THREE.TextureLoader().load(
          "img/2294472375_24a3b8ef46_o.jpg"
        );
        var material = new THREE.MeshBasicMaterial({ map: texture });

        mesh = new THREE.Mesh(geometry, material);

        scene.add(mesh);

        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        document.addEventListener("mousedown", onPointerStart, false);
        document.addEventListener("mousemove", onPointerMove, false);
        document.addEventListener("mouseup", onPointerUp, false);

        document.addEventListener("wheel", onDocumentMouseWheel, false);

        document.addEventListener("touchstart", onPointerStart, false);
        document.addEventListener("touchmove", onPointerMove, false);
        document.addEventListener("touchend", onPointerUp, false);

        //

        document.addEventListener(
          "dragover",
          function (event) {
            event.preventDefault();
            event.dataTransfer.dropEffect = "copy";
          },
          false
        );

        document.addEventListener(
          "dragenter",
          function () {
            document.body.style.opacity = 0.5;
          },
          false
        );

        document.addEventListener(
          "dragleave",
          function () {
            document.body.style.opacity = 1;
          },
          false
        );

        document.addEventListener(
          "drop",
          function (event) {
            event.preventDefault();

            var reader = new FileReader();
            reader.addEventListener(
              "load",
              function (event) {
                material.map.image.src = event.target.result;
                material.map.needsUpdate = true;
              },
              false
            );
            reader.readAsDataURL(event.dataTransfer.files[0]);

            document.body.style.opacity = 1;
          },
          false
        );

        //

        window.addEventListener("resize", onWindowResize, false);
        var o = new Orienter(),
          new_longitude = 0,
          last_longitude = 0,
          move_longitude = 0, //改变的经度的计算
          new_latitude = 0,
          last_latitude = 0,
          move_latitude = 0, //改变的纬度的计算
          latText = document.getElementById('info').children[0],
          lngText = document.getElementById('info').children[1];
          console.log('oo', o)
        o.onOrient = function (obj) {
          //重力感应计算角度
          if (1) {
            latText.innerText = 'Lat:' + obj.lat;
            lngText.innerText = 'gg:' + obj.b;
            //最新经度
            new_longitude = obj.lon;
            move_longitude = new_longitude - last_longitude;

            //最新纬度
            new_latitude = obj.lat;
            move_latitude = new_latitude - last_latitude;

            //判断经纬度
            if (move_longitude >= 300) {
              move_longitude = move_longitude - 361;
            } else if (move_longitude <= -300) {
              move_longitude = move_longitude + 359;
            }

            if (move_latitude >= 300) {
              move_latitude = move_latitude - 361;
            } else if (move_latitude <= -300) {
              move_latitude = move_latitude + 359;
            }

            if (isUserInteracting) {
              move_longitude = 0;
              move_latitude = 0;
            } else {
              move_longitude = move_longitude * 0.8;
              move_latitude = -move_latitude * 0.8;
            }
            //计算得出重力感应的经纬度
            lon = lon - move_longitude;
            last_longitude = obj.lon;
            lat = lat - move_latitude;
            last_latitude = obj.lat;
          }
        };
        o.on()
      }

      function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);
      }

      function onPointerStart(event) {
        isUserInteracting = true;

        var clientX = event.clientX || event.touches[0].clientX;
        var clientY = event.clientY || event.touches[0].clientY;

        onMouseDownMouseX = clientX;
        onMouseDownMouseY = clientY;

        onMouseDownLon = lon;
        onMouseDownLat = lat;
      }

      function onPointerMove(event) {
        if (isUserInteracting) {
          var clientX = event.clientX || event.touches[0].clientX;
          var clientY = event.clientY || event.touches[0].clientY;

          lon = (onMouseDownMouseX - clientX) * 0.1 + onMouseDownLon;
          lat = (clientY - onMouseDownMouseY) * 0.1 + onMouseDownLat;
        }
        lat = Math.max(-85, Math.min(85, lat));
        phi = THREE.MathUtils.degToRad(90 - lat);
        theta = THREE.MathUtils.degToRad(lon);

        camera.target.x = 500 * Math.sin(phi) * Math.cos(theta);
        camera.target.y = 500 * Math.cos(phi);
        camera.target.z = 500 * Math.sin(phi) * Math.sin(theta);
        camera.lookAt(camera.target);
        renderer.render(scene, camera);
      }

      function onPointerUp() {
        isUserInteracting = false;
      }

      function onDocumentMouseWheel(event) {
        var fov = camera.fov + event.deltaY * 0.05;

        camera.fov = THREE.MathUtils.clamp(fov, 10, 75);

        camera.updateProjectionMatrix();
      }

      function animate() {
        requestAnimationFrame(animate);
        update();
      }

      function update() {
        if (isUserInteracting === false) {
          // lon += 0.1;
        }

        // lat = Math.max(-85, Math.min(85, lat));
        phi = THREE.MathUtils.degToRad(90 - lat);
        theta = THREE.MathUtils.degToRad(lon);

        camera.target.x = 500 * Math.sin(phi) * Math.cos(theta);
        camera.target.y = 500 * Math.cos(phi);
        camera.target.z = 500 * Math.sin(phi) * Math.sin(theta);
        camera.lookAt(camera.target);

        /*
				// distortion
				camera.position.copy( camera.target ).negate();
				*/

        renderer.render(scene, camera);
      }
    </script>
  </body>
</html>
